<template>
<div class="bg-white">
	<div v-show="hasClass && compile" id="appbar-style" style="">
	  	<mu-appbar :title="dqkc.djj" class="example-appbar flex-appbar" style="position: relative; background-color: #f5f5f5;">
			<section id="top-appbar" >
				<section style="font-size: 1.1rem; color: #343434;flex: 0.7;"></section>
				<section style="flex: 4;">
					<span class="move-mid" style="color: #343434;">
				    	{{dqkc.djj}}
				    	<mu-icon-menu icon="expand_more" slot="left"  @change="handleChange" class="arrow-down" >
					    	<mu-menu-item :value="kcxxIndex" :title="'第'+kcxx.courseWhichIndex+'-'+(parseInt(kcxx.courseWhichIndex)+1)+'节'" v-for="(kcxx,kcxxIndex) in todayCourse"/>
					    </mu-icon-menu>
				    </span>
				</section>
			</section>
	    	<mu-flat-button  @click="btnhandleChange" slot="right" style="color: #343434;"/>
	 	</mu-appbar>
			
		<section class="card-list" >
			<!--<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="description" color="blue" />
	    		<span @click="showClassInfoDetail(dqkc.kcmc)">{{InterceptContent(dqkc.kcmc)}}</span>
	    	</section>-->
			<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="description" color="blue" />
	    		<span>{{dqkc.kcmc}}</span>
	    	</section>
	    <section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="room" color="green500" />
	    		<span>{{dqkc.dd.length==0?'上课地点另行通知':dqkc.dd}}</span>
	    	</section>
	    <section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="receipt" color="orange700" />
	    		<span>{{dqkc.sj}}</span>
	    	</section>
	    <section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="event" color="blueGrey500" />
	    		<span>{{dqkc.zc}}</span>
	    	</section>
		 	
	    	
		</section>
	

	</div>
	
	
	
	
	
	<div v-show="!compile" class="no_class">
		<mu-circular-progress :size="40" color="green500"/>
		<div>加载中..</div>
	</div>
	<div v-show="compile && unConnect && thirdPara" class="no_class">
		<mu-icon value="report_problem" :size="72" color="orange"/>
		<div>请重新登录或检查网络连接</div>
	</div>
	<div v-show="!hasClass && compile && !thirdPara" class="no_class">
		<mu-icon value="report_problem" :size="72" color="orange"/>
		<div>今天您没有课程</div>
	</div>
	<canvas id="lockCanvas" v-on:click=""></canvas>
	<form action="" method="get">
    <label>
        <input name="password" id="set" type="radio" value="1" checked="checked" />设&nbsp置&nbsp密&nbsp码</br>
    </label>
    <label>
        <input name="password" id="test" type="radio" value="2" />验&nbsp证&nbsp密&nbsp码</label>
</form>
</div>
	
</template>

<script>
	
export default {
 data(){
    return {
    	hasClass:false,
			compile:false,
			unConnect:false,
			thirdPara:false,
			index:-1,
			todayCourse:{},
			publicInfo:{},
			dqkc:{
//				sj:'',
				zc:'',
				djj:'',
				dd:'',
				kcmc:'',
				rkjs:'',
				teaContent:''
			},
    }
  	},components:{
  },
  mounted(){
	this.loadTeacherClassInfo(this.$route.query)
	this.publicInfo=this.$route.query
	
  },
  watch:{
	},
  methods: {
   loadTeacherClassInfo(val){
	 			let that=this
	    	var whichDay=''+new Date().getDay()
	    		whichDay= whichDay=='0'?'7':whichDay
	    	that.axios.post('/iyx/TeacherCourse/Day',{
    		"teacherId": localStorage.userNumber,
				"courseAcademicYear": val.academic,
				"courseAcademicTerm": val.semester,
				"courseWhichWeek": val.teachWeek,
				"courseWhichDay": whichDay
	    	}).then(function(response){
	    		 
	    		 if(response.data.length>0){
	        		that.todayCourse=response.data
	        		console.info(that.todayCourse)
	        		that.indexXXX(that.todayCourse[0])
	        		that.index=0;
		        	that.$emit('hasClass',true);
		        	that.hasClass=true;
	        	}else{
	        		that.hasClass=false;
		        	that.$emit('hasClass',false);
	        	}
	        	that.compile=true
	        	that.unConnect=false
	        	that.thirdPara=false
	    	}).catch(function(error){
	    		console.info(error)
	    	})
	 },
	 	indexXXX(val){
     		this.dqkc = {
	     			sj:val.courseTime.slice(0,10),
	      		zc:'第'+this.publicInfo.teachWeek+'周,星期'+val.courseWhichDay,
	      		djj:'第'+val.courseWhichIndex+'-'+(parseInt(val.courseWhichIndex)+1)+'节',
	      		dd:val.courseClassroomPosition,
//	      		rkjs:this.todayCourse[this.index].className,
	      		kcmc:val.courseName,
//	      		teaContent:this.todayCourse[this.index].teachContent
    		}
     	},
		handleChange (val) {
				this.indexXXX(this.todayCourse[val])
	    },
		btnhandleChange(){
			this.$emit('handchange');
		},
  }
}
 	
 	
 	   /**
         * 半径，画布宽度，画布高度，画布x内边距，画布y内边距
         */
        var R = 26,
            canvasWidth = 400,
            canvasHeight = 320,
            OffsetX = 30,
            OffsetY = 30;
        var circleArr = [];
        var theSecondResult = [];
        var aa = [];
        var bb = [];
        var n = 1;


        function createCirclePoint(diffX, diffY) {
            for (var row = 0; row < 3; row++) {
                for (var col = 0; col < 3; col++) {
                    // 计算圆心坐标
                    var Point = {
                        X: (OffsetX + col * diffX + (col * 2 + 1) * R),
                        Y: (OffsetY + row * diffY + (row * 2 + 1) * R)
                    };
                    circleArr.push(Point);
                }
            }
        }
        window.onload = function() {
            var canvas = document.getElementById("lockCanvas");
            canvasWidth = document.body.offsetWidth; //网页可见区域宽
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            var cxt = canvas.getContext("2d");
            /**
             * 一行3个~
             * OffsetX为canvas x方向内边距
             * */
            var X = (canvasWidth - 2 * OffsetX - R * 2 * 3) / 2;
            var Y = (canvasHeight - 2 * OffsetY - R * 2 * 3) / 2;

            createCirclePoint(X, Y);

            bindEvent(canvas, cxt);
            //CW=2*offsetX+R*2*3+2*X


            Draw(cxt, circleArr, [], null);



        }

        function Draw(cxt, circleArr, pwdArr, touchPoint) {
            if (pwdArr.length > 0) {
                cxt.beginPath();
                for (var i = 0; i < pwdArr.length; i++) {
                    var pointIndex = pwdArr[i];
                    cxt.lineTo(circleArr[pointIndex].X, circleArr[pointIndex].Y);
                }
                cxt.lineWidth = 10;
                cxt.strokeStyle = "#627eed";
                cxt.stroke();
                cxt.closePath();
                if (touchPoint != null) {
                    var lastPointIndex = pwdArr[pwdArr.length - 1];
                    var lastPoint = circleArr[lastPointIndex];
                    cxt.beginPath();
                    cxt.moveTo(lastPoint.X, lastPoint.Y);
                    cxt.lineTo(touchPoint.X, touchPoint.Y);
                    cxt.stroke();
                    cxt.closePath();
                }
            }
            for (var i = 0; i < circleArr.length; i++) {
                var Point = circleArr[i];
                cxt.fillStyle = "#627eed";
                cxt.beginPath();
                cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();
                cxt.fillStyle = "#ffffff";
                cxt.beginPath();
                cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();
                if (pwdArr.indexOf(i) >= 0) {
                    cxt.fillStyle = "#627eed";
                    cxt.beginPath();
                    cxt.arc(Point.X, Point.Y, R - 16, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                }

            }
        }

        /**
         * 计算选中的密码用来保存以及判定
         */
        function getSelectPwd(touches, pwdArr) {
            for (var i = 0; i < circleArr.length; i++) {
                var currentPoint = circleArr[i];
                var xdiff = Math.abs(currentPoint.X - touches.pageX);
                var ydiff = Math.abs(currentPoint.Y - touches.pageY);
                var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
                if (dir > R || pwdArr.indexOf(i) >= 0)
                    continue;
                pwdArr.push(i);
                return pwdArr;
                break;
            }
        }

        /**
         * 绑定功能选择以及主要功能
         */
        function bindEvent(canvas, cxt) {
        	console.log(canvas)
            var pwdArr = [];
            canvas.addEventListener("touchstart", function(e) {
                getSelectPwd(e.touches[0], pwdArr);
            }, false);
            canvas.addEventListener("touchmove", function(e) {
                e.preventDefault();
                var touches = e.touches[0];
                getSelectPwd(touches, pwdArr);
                cxt.clearRect(0, 0, canvasWidth, canvasHeight);
                Draw(cxt, circleArr, pwdArr, {
                    X: touches.pageX,
                    Y: touches.pageY
                });
            }, false);
            canvas.addEventListener("touchend", function(e) {
                cxt.clearRect(0, 0, canvasWidth, canvasHeight);
                Draw(cxt, circleArr, pwdArr, null);
                var theResult = pwdArr.join("-");



                // alert("密码结果是：" + theResult);

                if (document.getElementById("set").checked === true) { //选择功能为设置密码
                    if (pwdArr.length < 5) { //判断密码长度
                        alert("密码过短,请重新输入");
                        pwdArr = [];
                    } else {
                        localStorage.thePassword = theResult;
                        bb = theResult;
                        //次数
                        alert("设置的密码为：" + localStorage.thePassword);
                        alert("请再次输入密码");

                        n++;
                    }
                }
            }, false);
            if (document.getElementById("test").checked === true) { //选择功能为验证密码
                alert("请测试");
                if (pwdArr == localStorage.thePassword) {


                }
            }
            return n;

        }

 </script>



<style scoped>
ul,li{
	margin: 0;
}
.no_class{
	padding:150px 0;
	font-size:24px;
	text-align: center;
}
.arrow-down{
	display: block;
	position: absolute !important;
	left:4rem;
	color: #282828;
	height: 2.8rem;
	top: 0;
}
.arrow-down .mu-icon{
	position: relative !important;
	top:-0.2rem;
}
.arrow-down .mu-icon-button{
	height: 2.8rem!important;
}

/*.flex-appbar{
	display: flex;
	justify-content: center;
}

.flex-appbar section:nth-child(1),.flex-appbar section:nth-child(3){
	flex: 1;
}
.flex-appbar section:nth-child(1){
	flex: 4;
}*/
#appbar-style{
	margin-top:3.2rem;
	/*margin-top: 3.2rem;*/
}
#appbar-style .mu-appbar{
	background-color: white;
	height: 2.8rem;
	box-shadow: none;
	
}
.flex-appbar{
}
.move-mid{
	/*width: 5rem;*/
	height: 2.8rem;
	text-align: left;
	line-height: 2.8rem;
	display: block;
	font-size: 1.1rem;
	position: relative;
	/*flex: 5;*/
}
#top-appbar{
	width: 100%;
	height: 2.8rem;
	position:absolute;
	left: 0;
	top:0; 
	display:flex;
	justify-content: center;
	align-items: center;
}
.back-home{
	width:3.5rem; 
	position: absolute;
	left: 0;
	top: 0; 
	display: flex;
	justify-content: center;
	align-items: center;
}
.card-list{
	/*margin:0 0.5rem 0 0.5rem;*/ 
	border-radius: 2px;
	margin: 0 3.2% 0 3.2%;
}
.class-detail-info{
	width: 100%; 
	height: 2.6rem; 
	display: flex; 
	flex-direction: row; 
	text-indent: 0.2rem;
}
.class-detail-info span{
	display: block;
	color:#1f1f1f ;
	/*color:#818181;*/
	font-size: 1rem ;
	/*width: 100%;*/
	text-align: left;
	height: 2.6rem;
	flex: 5;
	line-height: 2.6rem;
	text-indent: 9px;
}
.list-icon{
	height: 2.6rem;
	line-height: 2.6rem;
	flex: 0.5;
	text-align: left;
}
</style>